<template>
  <my-drawer ref="MyDrawerRef" title="菜单操作" @submit="submit()" @cancel="cancel" :disabled="false" width="30%">
    <el-form :model="drawerProps.rowData" :rules="rules" ref="FormRef" label-width="120">
      <el-form-item label="上级路由">
        <el-input :disabled="true" v-model="drawerProps.parentTitle"></el-input>
      </el-form-item>
      <el-form-item label="菜单标识" prop="name">
        <el-input v-model="drawerProps.rowData.name"></el-input>
      </el-form-item>
      <el-form-item label="排序">
        <el-input-number :min="1" :max="100" v-model="drawerProps.rowData.sort"></el-input-number>
      </el-form-item>
      <el-form-item label="菜单路径" prop="path">
        <el-input v-model="drawerProps.rowData.path"></el-input>
      </el-form-item>
      <el-form-item label="是否有子菜单">
        <el-switch
          v-model="isLeafNode"
          @change="changeSwitch"
          :inactive-value="true"
          :active-value="false"
          :disabled="canChangeLeafToNode"
        ></el-switch>
      </el-form-item>
      <el-form-item label="菜单组件" v-if="isLeafNode" prop="component">
        <el-input v-model="drawerProps.rowData.component"></el-input>
      </el-form-item>
      <el-form-item label="重定向" v-if="!isLeafNode" prop="redirect">
        <el-input v-model="drawerProps.rowData.redirect"></el-input>
      </el-form-item>
      <el-form-item label="图标" prop="meta.icon">
        <el-select v-model="drawerProps.rowData.meta.icon">
          <el-option v-for="i in Icons" :key="i.name" :label="i.name" :value="i.name">
            <div class="flex flex-row">
              <div class="flex flex-col justify-center mr-5px">
                <el-icon size="20">
                  <component :is="i.name"></component>
                </el-icon>
              </div>
              <div class="flex flex-col justify-center">
                <span class="align-bottom">{{ i.name }}</span>
              </div>
            </div>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标题" prop="meta.title">
        <el-input v-model="drawerProps.rowData.meta.title"></el-input>
      </el-form-item>
      <el-form-item label="是否固定">
        <el-switch v-model="drawerProps.rowData.meta.isAffix"></el-switch>
      </el-form-item>
      <el-form-item label="是否隐藏">
        <el-switch v-model="drawerProps.rowData.meta.isHide"></el-switch>
      </el-form-item>
      <el-form-item label="是否全屏">
        <el-switch v-model="drawerProps.rowData.meta.isFull"></el-switch>
      </el-form-item>
      <el-form-item label="是否缓存">
        <el-switch v-model="drawerProps.rowData.meta.isKeepAlive"></el-switch>
      </el-form-item>
      <!-- 外部链接只有在叶子节点下才可以 -->
      <el-form-item label="外部链接" v-if="isLeafNode">
        <el-input v-model="drawerProps.rowData.meta.isLink"></el-input>
      </el-form-item>
    </el-form>
  </my-drawer>
</template>

<script setup lang="ts" name="MenuDrawer">
import { ref, reactive } from "vue";
import MyDrawer from "@/components/MyDrawer/index.vue";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { IsPath } from "@/utils";
import { CheckName, CheckPath } from "@/utils/eleValidate";
import * as Icons from "@element-plus/icons-vue";
import { AddRoute, EditRoute } from "@/api/modules/routes";
import { initDynamicRouter } from "@/routers/modules/dynamicRouter";
const MyDrawerRef = ref<InstanceType<typeof MyDrawer> | null>();

interface DrawerProps {
  parentTitle: string;
  rowData: any;
  api?: (params: any) => Promise<any>;
  type: "add" | "edit";
  pid: number;
  getTable?: () => Promise<any>;
}

// 表单
const initFormData: Menu.MenuOptions = {
  name: "",
  component: "",
  redirect: "",
  path: "",
  sort: 100,
  pid: 1,
  meta: {
    icon: "",
    title: "",
    isAffix: false,
    isFull: false,
    isHide: false,
    isKeepAlive: false,
    isLink: ""
  },
  apis: []
};

const changeSwitch = () => {
  drawerProps.value.rowData.component = "";
  drawerProps.value.rowData.redirect = "";
};

// 判断菜单是否为叶子节点
const isLeafNode = ref(false);
// 当编辑的时候这个是否为叶子节点不可修改的
const canChangeLeafToNode = ref(false);

const drawerProps = ref<DrawerProps>({
  rowData: JSON.parse(JSON.stringify(initFormData)),
  parentTitle: "根目录",
  type: "add",
  pid: 1
});

const acceptParams = (params: DrawerProps) => {
  // 初始化数据
  if (params.rowData) {
    // 不准在修改是否有子菜单
    canChangeLeafToNode.value = true;
    // 判断是否为叶子菜单
    if (IsPath(params.rowData.component)) {
      isLeafNode.value = true;
    } else {
      isLeafNode.value = false;
    }
    drawerProps.value.rowData = JSON.parse(JSON.stringify(params.rowData));
    drawerProps.value.parentTitle = params.parentTitle;
  } else {
    canChangeLeafToNode.value = false;
    drawerProps.value.rowData = initFormData;
    if (params.parentTitle) {
      drawerProps.value.parentTitle = params.parentTitle;
    }
    drawerProps.value.rowData.pid = params.pid;
  }
  drawerProps.value.api = params.api;
  drawerProps.value.type = params.type;
  drawerProps.value.getTable = params.getTable;
  MyDrawerRef.value?.acceptParams();
};

// ---------------提交----------------
const FormRef = ref<FormInstance>();
const submit = () => {
  FormRef.value?.validate(async valid => {
    if (valid) {
      console.log(drawerProps.value.rowData);
      try {
        if (drawerProps.value.type === "add") {
          await AddRoute(drawerProps.value.rowData);
          ElMessage.success("添加成功");
        } else if (drawerProps.value.type === "edit") {
          await EditRoute(drawerProps.value.rowData);
          ElMessage.success("修改成功");
        }
        await initDynamicRouter(); //初始化路由
        await drawerProps.value.getTable!(); //更新路由表格
        drawerProps.value.rowData = JSON.parse(JSON.stringify(initFormData));
        MyDrawerRef.value?.close();
      } catch (error) {}
    }
  });
};
const cancel = () => {
  // 初始化数据 当关闭的时候
  FormRef.value?.clearValidate();
};

const rules = reactive<FormRules>({
  name: [{ required: true, message: "标识不可为空" }, { min: 1, max: 20, message: "字符串1-20之间" }, { validator: CheckName }],
  component: [
    { required: true, message: "组件必须的" },
    { min: 2, max: 100, message: "字符串2-100之间" },
    { validator: CheckPath }
  ],
  redirect: [
    { required: true, message: "重定向必须的" },
    { min: 1, max: 100, message: "字符串1-100之间" },
    { validator: CheckPath }
  ],
  path: [{ required: true, message: "路径必须的" }, { min: 1, max: 100, message: "字符串1-100之间" }, { validator: CheckPath }],
  "meta.title": [
    { required: true, message: "标题必须的" },
    { min: 2, max: 30, message: "字符串2-30之间" }
  ],
  "meta.icon": [{ required: true, message: "图标不可为空" }]
});

defineExpose({
  acceptParams
});
</script>

<style></style>
